<template>
  <div class="shopcar-container">
            <!-- 商品列表区域 -->
      <div class="goods-list">
         <div class="mui-card" v-for="(item, i) in goodslist" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <!-- 设置此属性开关就可以亮 -->
                    <!-- 定义change属性监听选中状态的变化 -->
                   <mt-switch v-model="$store.getters.getGoodsSelected[item.id]" @change="getSelectedChange(item.id, $store.getters.getGoodsSelected[item.id] )"></mt-switch>
                   <img :src="item.thumb_path" alt="">
                   <div class="info">
                       <h1>{{item.title}}</h1>
                       <p >
                           <span class="price">￥{{item.sell_price}} </span>
                           <numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                           <a  @click.prevent="remove(item.id, i)">删除 </a>
                       </p>
                   </div>
                </div>
           </div>
        </div>
      </div>
      <!-- 商品结算区域 -->
     <div class="mui-card">
        <div class="mui-card-content">
            <div class="mui-card-content-inner jiesuan" >
              <div class="left">
                  <p>总计(不含运费):</p>
                  <p>已勾选商品<span class="red">{{$store.getters.getGoodsCountAndAmount.count}} </span>件，总价：<span class="red">￥{{$store.getters.getGoodsCountAndAmount.amount}}</span></p>
              </div>
              <mt-button type="danger" size="small">结算</mt-button>
            </div>
       </div>
 </div>
</div>
</template>
<script>
import numbox from '../subcomponents/shopCar_numberbox.vue';
export default{
    data () {
        return {
            goodslist:[],
        }
    },
    methods: {
        //获取商品列表渲染页面
      getGoodsList(){
          var idArr=[];
          this.$store.state.car.forEach(item=>{
              idArr.push(item.id);
          })
          if(idArr.length<=0){
              return;
          }
          this.$http.get('http://www.liulongbin.top:3005/api/goods/getshopcarlist/'+ idArr.join(",")).then(result=>{
              if(result.body.status == 0){
                  this.goodslist = result.body.message;
              }
          })
      },
      // 实现点击删除功能
      remove(id, i){
          this.goodslist.splice(i, 1);
          this.$store.commit('removeFromCar', id);
      },
      // 将选中状态返回给vuex存储
      getSelectedChange(id, val){
          this.$store.commit("getUpdateSelected", {id, selected:val})
      }
    },
    components:{
        numbox
    },
    created () {
        this.getGoodsList();
    }
}
</script>
<style lang="less" scoped>
.shopcar-container{
    background-color: #eee;
    overflow: hidden;
    .goods-list{
        .jiesuan{
            display: flex;
            align-items: center;
        }
        img{
            width: 60px;
            height: 60px;
        }
        h1{
            font-size: 14px;
        }
        .info{
            .price{
                color: red;
                font-weight: 700;
            }
        }
    }
    .mui-card-content-inner{
        display: flex;
        justify-content: space-between;
        align-items:center;
        .red{
            color: red;
            font-weight: 700;
            font-size: 16px;
        }
    }
}
</style>